<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<link rel="stylesheet" href="js/Bootstrap.css">
<link rel="stylesheet" href="js/jquery.mobile.structure.min.css" />
<link rel="stylesheet" href="js/jquery.mobile.icons.min.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile.js"></script>
<script type="text/javascript" charset="utf-8">
	// Wait for device API libraries to load
	//
	$(document).ready(onLoad);
	function onLoad() {
		document.addEventListener("deviceready", onDeviceReady, false);
	}
	// device APIs are available
	// deviceready事件處理函數，PhoneGap完成載入後調用該函數
	function onDeviceReady() {

	}
	
</script>
<style type="text/css">
.dayWidget {
	width: 100%;
	border: 2px solid #9C9C9C;
	border-radius: 5px;
	margin: 0.5em 0em;
}
.dayWidget hr {
	margin: 0px;
	border-style: none;
	border-top: 2px dashed #9C9C9C;
}
.dayWidget .dayTitle {
	display: block;
	position: relative;
}
.dayWidget .dayWeek {
	color: #777;
	position: absolute;
	right: 0.3em;
	bottom: 0px;
}
.dayWidget .dayNumber {
	color: black;
	margin-left: 0.5em;
	font-size: 1.7em;
	line-height: 1.8em;
}
.dayWidget .dayHollday {
	color: red;
}
.dayWidget p {
	margin: 0.4em;
	margin-left: 4em;
}
</style>
<title>冠球行事曆</title>
</head>
<body>
<div data-role="page">
  <div data-role="header" data-theme="b" data-position="fixed">
    <h1>行事曆</h1>
    <a href="eventDetail.html" data-ajax="false" class="ui-btn-right ui-btn ui-corner-all ui-icon-plus ui-btn-icon-notext">ADD</a>
    <div data-role="navbar"> <a href="#" style="position:absolute; left:0px; z-index:1"  class="ui-btn ui-corner-all ui-icon-carat-l ui-btn-icon-notext">Pre</a><a href="#" style="position:absolute;right:0px; z-index:1"  class="ui-btn ui-corner-all ui-icon-carat-r ui-btn-icon-notext">Next</a> <a href="#" style="width:100%; z-index:0" class="ui-btn">2014/07月</a></div>
    <!-- /navbar --> 
  </div>
  <!-- /header -->
  <div role="main" class="ui-content">
    <div class="dayWidget">
      <div class="dayTitle">
        <div class="dayNumber">2</div>
        <span class="dayWeek" >Wednesday</span></div>
      <div class="dayContent">
        <hr>
        <p>10:00　開會</p>
        <hr>
        <p>&nbsp;</p>
        <hr>
        <p>&nbsp;</p>
      </div>
    </div>
    <!-- /dayWidget -->
    <div class="dayWidget">
      <div class="dayTitle">
        <div class="dayNumber">3</div>
        <span class="dayWeek" >Thursday</span></div>
      <div class="dayContent">
        <hr>
        <p>09:00　開會</p>
        <hr>
        <p>13:00　有訪客</p>
        <hr>
        <p>15:00　出貨</p>
      </div>
    </div>
    <!-- /dayWidget -->
    <div class="dayWidget">
      <div class="dayTitle">
        <div class="dayNumber">4</div>
        <span class="dayWeek" >Friday</span></div>
      <div class="dayContent">
        <hr>
        <p>18:30　同事聚餐</p>
        <hr>
        <p>&nbsp;</p>
        <hr>
        <p>&nbsp;</p>
      </div>
    </div>
    <!-- /dayWidget -->
    <div class="dayWidget">
      <div class="dayTitle">
        <div class="dayNumber dayHollday">5</div>
        <span class="dayWeek dayHollday" >Saturday</span></div>
      <div class="dayContent">
        <hr>
        <p>11:30　朋友聚餐</p>
        <hr>
        <p>&nbsp;</p>
        <hr>
        <p>&nbsp;</p>
      </div>
    </div>
    <!-- /dayWidget -->
    <div class="dayWidget">
      <div class="dayTitle">
        <div class="dayNumber dayHollday">6</div>
        <span class="dayWeek dayHollday" >Sunday</span></div>
      <div class="dayContent">
        <hr>
        <p>&nbsp;</p>
        <hr>
        <p>&nbsp;</p>
        <hr>
        <p>&nbsp;</p>
      </div>
    </div>
    <!-- /dayWidget -->
    <div class="dayWidget">
      <div class="dayTitle">
        <div class="dayNumber">7</div>
        <span class="dayWeek" >Monday</span></div>
      <div class="dayContent">
        <hr>
        <p>08:45 開會</p>
        <hr>
        <p>&nbsp;</p>
        <hr>
        <p>&nbsp;</p>
      </div>
    </div>
    <!-- /dayWidget -->
    <div class="dayWidget">
      <div class="dayTitle">
        <div class="dayNumber">8</div>
        <span class="dayWeek" >Tuesday</span></div>
      <div class="dayContent">
        <hr>
        <p>&nbsp;</p>
        <hr>
        <p>&nbsp;</p>
        <hr>
        <p>&nbsp;</p>
      </div>
    </div>
    <!-- /dayWidget -->
    <div class="dayWidget">
      <div class="dayTitle">
        <div class="dayNumber">9</div>
        <span class="dayWeek" >Wednesday</span></div>
      <div class="dayContent">
        <hr>
        <p>&nbsp;</p>
        <hr>
        <p>&nbsp;</p>
        <hr>
        <p>&nbsp;</p>
      </div>
    </div>
    <!-- /dayWidget -->
    <div class="dayWidget">
      <div class="dayTitle">
        <div class="dayNumber">10</div>
        <span class="dayWeek" >Thursday</span></div>
      <div class="dayContent">
        <hr>
        <p>&nbsp;</p>
        <hr>
        <p>&nbsp;</p>
        <hr>
        <p>&nbsp;</p>
      </div>
    </div>
    <!-- /dayWidget -->
    <div class="dayWidget">
      <div class="dayTitle">
        <div class="dayNumber">11</div>
        <span class="dayWeek" >Friday</span></div>
      <div class="dayContent">
        <hr>
        <p>19:30　朋友聚餐</p>
        <hr>
        <p>&nbsp;</p>
        <hr>
        <p>&nbsp;</p>
      </div>
    </div>
    <!-- /dayWidget --> 
    
  </div>
  <!-- /content --> 
  
</div>
<!-- /page -->
</body>
</html>
